  //jq的自调用函数
  $(function () {
    let pageid = 0
    //渲染函数
    function render(all) {
        let r = {
            pageid: 0,
            callfn: function (data) {}
        }
        for (let k in all) {
            r[k] = all[k]
        }
        $.ajax({
            url: 'http://chst.vip:1234/api/getmoneyctrl',
            data: {
                'pageid': r.pageid
            },
            success: function (data) {
                //console.log(data);
                let html = template('main', data)
                $('.info').html(html)
                //调用内部对象中函数传入总数目
                r.callfn(data.totalCount)
            }
        })
    }
    //首次渲染
    render({
        pageid: pageid,
        /* 必须这种方式传入函数 */ callfn: function (totalCount) {
            callback(totalCount)
        }
    })
    //形参接受了ajax中传入的总数目
    function callback(tolc) {
        //console.log(tolc);
        let allpages = parseInt(tolc / 10)
        let obj = {}
        let arr = []
        //循环出一个有14个对象的数组，每个对象有key(totalCount)和value(allpages)
        //循环出一个用于下拉栏的渲染模板引擎所需的对象中的数组
        for (let i = 0; i < allpages; i++) {
            arr.push(obj)
            arr[i].totalCount = allpages
        }
        //创建个模板引擎所需要的对象data1
        let data1 = {}
        data1.option = arr
        //console.log(data1);
        let html = template('select', data1)
        $('.page').html(html)

        //判断函数上一页和下一页
        function judge() {
            if (pageid === 0) {
                $('.prev').prop('disabled', true).css('color', '#ccc')
            }else if(pageid<allpages){
                $('.prev').prop('disabled',false).css('color','#333')
                $('.next').prop('disabled',false).css('color','#333')
            }
            if(pageid===allpages){
                $('.next').prop('disabled',true).css('color','#ccc')
                $('.prev').prop('disabled',false).css('color','#333')
            }
        }
        judge()
        //点击下一页事件
        $('.next').on('click', function () {
            pageid++
            $('.prev').prop('disabled', false).css('color', '#333')
            if (pageid < allpages) {
                render({
                    pageid: pageid
                })
            } else if (pageid === allpages) {
                $('.next').prop('disabled', true).css('color', "#ccc")
                render({
                    pageid: allpages
                })
            } 
            console.log(pageid);
            //自身因为是0所以页面要加1 
            $(`.page>option:nth-of-type(${pageid})`).prop('selected', true).siblings('.option').prop(
                'selected', false)
        })

        //点击上一页事件

        $('.prev').on('click', function () {
            pageid--
            $('.next').prop('disabled', false).css('color', '#333')
            if (pageid > 0) {
                render({
                    pageid: pageid
                })
            } else if (pageid === 0) {
                $('.prev').prop('disabled', true).css('color', '#ccc')
                render({
                    pageid: pageid
                })
            } 
            //有bug0和1都是第一页
            $(`.page>option:nth-of-type(${pageid})`).prop('selected', true).siblings().prop(
                'selected', false)
        })
        //菜单下拉事件
        $('.page').change(function () {
            let str = $(this).val()
            // console.log(str.split('/')[0]);
            pageid = str.split('/')[0]
            console.log(pageid);
            judge()
            render({
                pageid: pageid
            })               
        })
    }
    backtop()
})
